<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Filter</title>
        <script src="../js/angular.js" charset="utf-8"></script>
    </head>
    <body ng-app="App">
        <div ng-controller="Ctrl">

            <h2>{{ 18000 | currency }}</h2>
            <h2>{{ 18000 | currency: '￥' }}</h2>
            <h2>{{ 18000 | currency: '￥': 0 }}</h2>
            <h2>{{ money }}</h2>
            <hr>
            <h2>{{ 'malatang' | uppercase }}</h2>
            <h2>{{ 'TianLaoShi' | lowercase }}</h2>
            <hr>
            <h2>{{ 123456789 | number }}</h2>
            <h2>{{ 123456789 | number: 2 }}</h2>
            <hr>
            <!-- <ul>
                <li ng-repeat="person in people | orderBy: '-name'">
                    <span>{{ person.name }}</span>
                    <span>{{ person.age }}</span>
                    <span>{{ person.gender }}</span>
                </li>
            </ul> -->

            <button ng-init="reverse=true;" ng-click="reverse = !reverse">升序/降序</button>
            <ul>
                <!-- 使用orderBy排序时候，可以添加第一个参数，排序的参照，第二个参数，代表升序还是降序 -->
                <li ng-repeat="person in people | orderBy: 'age': reverse">
                    <span>{{ person.name }}</span>
                    <span>{{ person.age }}</span>
                    <span>{{ person.gender }}</span>
                </li>
            </ul>

            <hr>
            <h2>{{ '张云瑞雪' | limitTo: 2: 2 }}</h2>

            <hr>
            <h2>{{ time | date }}</h2>
            <h2>{{ time | date: 'medium' }}</h2>
            <h3>{{ time | date: 'yyyy-MM-dd HH:mm:ss' }}</h3>
            <h3>{{ time | date: 'yy年MM月dd日 HH时mm分ss秒 a' }}</h3>
            <!-- 在date过滤器中，可以把时间戳格式化为特定的格式。内部的 yyyy MM dd HH mm ss a关键字符不可以随便替换 -->

            <hr>
            <input type="text" ng-model="searchText">
            <ol>
                <li ng-repeat="person in people | filter: searchText">
                    <span>{{ person.name }}</span>
                    <span>{{ person.age }}</span>
                    <span>{{ person.gender }}</span>
                </li>
            </ol>
            <hr>
            <label>
                Search By Any:
                <input type="text" ng-model="search.$">
            </label>
            <br>
            <label>
                Search By Name:
                <input type="text" ng-model="search.name">
            </label>
            <br>
            <label>
                Search By Age:
                <input type="text" ng-model="search.age">
            </label>
            <br>
            <label>
                Search By Gender:
                <input type="text" ng-model="search.gender">
            </label>
            <br>
            <ol>
                <li ng-repeat="person in people | filter: search: strict">
                    <span>{{ person.name }}</span>
                    <span>{{ person.age }}</span>
                    <span>{{ person.gender }}</span>
                </li>
            </ol>

            <hr>
            <h2>{{ 'abcd' | bigFilter: 10: 'abc' }}</h2>

            <hr>
            <ol>
                <li ng-repeat="person in people | myFilter: 'age': 15 :30">
                    <span>{{ person.name }}</span>
                    <span>{{ person.age }}</span>
                    <span>{{ person.gender }}</span>
                </li>
            </ol>

            <hr>
            <pre>{{ {'name': 'abc', 'age': '29', 'gender': 'man'} | json  }}</pre>
            <pre>{{ {'name': 'abc', 'age': '29', 'gender': 'man'} | json: 4 }}</pre>
            <pre>{{ {'name': 'abc', 'age': '29', 'gender': 'man'} | json: 8 }}</pre>

            <div>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
            </div>

        </div>
    </body>
    <script type="text/javascript">

        angular.module('App', [])
        .controller('Ctrl', ['$scope', '$filter', function ($scope, $filter) {

            // 过滤器可以在表达式中通过 | 调用，也可以在控制器中通过$filter服务使用
            $scope.money = $filter('currency')(18000, '￥', 0);

            $scope.people = [
                { name: 'jake', age: 18, gender: 'F' },
                { name: 'john', age: 23, gender: 'M' },
                { name: 'tom', age: 45, gender: 'F' },
                { name: 'jack', age: 12, gender: 'M' },
                { name: 'hanleilei', age: 26, gender: 'F' }
            ];

            // 获取时间戳
            $scope.time = new Date().getTime();
        }])


        // 自定义过滤器
        .filter('bigFilter', function () {
            return function (str, a, b) {
                console.log(a);
                console.log(b);
                // 将str转为大写并返回
                return str.toUpperCase();
            };
        })

        .filter('myFilter', function () {
            return function (arr, attrName, minValue, maxValue) {

                // for (var i = 0; i < arr.length; i++) {
                //     if (arr[i][attrName] >= minValue && arr[i][attrName] <= maxValue) {
                //         res.push(arr[i]);
                //     }
                // }

                // 对于forEach和map来说，功能类似。不同点在于map有返回值，forEach没有
                // 使用map时要注意，返回的数组与原数组长度相同，可以对元素进行操作，但是不可以删除元素
                // 如果有元素未返回，则位置被undefined代替
                var res = [];
                arr.map(function (person) {
                    console.log('myFilter');
                    if (person[attrName] >= minValue && person[attrName] <= maxValue) {
                        res.push(person);
                    }
                });
                console.log('----------------');

                return res;
            };
        })



        // var arr = [1, 2, 3, 4, 5, 6];
        // var a = arr.forEach(function (item, index) {
        //     if (item >= 3) {
        //         return item;
        //     }
        // });
        //
        // var b = arr.map(function (item, index) {
        //     if (item >= 3) {
        //         return item;
        //     }
        // });
        // console.log(a);
        // console.log(b);






    </script>
</html>
